<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner slider step02</title>
<!-- 
	step01 - 레이아웃 구성
	step02 - 이미지 전환
 -->
 <style type="text/css">
 	*{ padding: 0; margin: 0; }
 	.banner_slider_container *{
 		border: 1px solid black;
 		display: inline-block;
 		vertical-align: middle;
 	}
 	.banner_container{
 		width: 256px;
 		height: 256px;
 		position: relative;
 		overflow: hidden;
 	}
 	.banner_container img{
 		position: absolute;
 	}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
 <script type="text/javascript">
 	$(document).ready( function(){
 		var $imageList = $( ".banner_container img" );
 		var $currentImage;
 		var currentIndex = 1;
		 		
 		initImage();
 		function initImage(){
 			$imageList.css( {"left":256})
 			$imageList.eq( currentIndex ).css( "left", 0 );
 		}
 		
 		function updateCurrentImage(){
 			if($currentImage){
 				$currentImage.css( "left", 256 );
 			}
 		}
 	});
 </script>
</head>
<body>
	<div class="banner_slider_container">
		<img alt="" src="img/prev_arrow.png">
		<div class="banner_container">
			<img alt="" src="img/img01.png">
			<img alt="" src="img/img02.png">
			<img alt="" src="img/img03.png">
			<img alt="" src="img/img04.png">
			<img alt="" src="img/img05.png">
		</div>		
		<img alt="" src="img/next_arrow.png">
	</div>
</body>
</html>